<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诺安多策略混合A十大重仓股分析报告</title>
    <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        
        .ppt-container {
            width: 100%;
            height: 100vh;
            position: relative;
            background-color: #f5f7fa;
        }
        
        .slide {
            width: 100%;
            height: 100vh;
            position: absolute;
            display: none;
            padding: 40px;
            box-sizing: border-box;
            background-color: #f5f7fa;
        }
        
        .active {
            display: block;
        }
        
        .title-card {
            background-color: #2c3e50;
            color: white;
            padding: 20px 30px;
            border-radius: 8px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .content-card {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            height: calc(100% - 120px);
        }
        
        .full-width {
            grid-column: span 2;
        }
        
        .chart-container {
            height: 400px;
            min-width: 40%;
        }
        
        .nav-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 100;
        }
        
        .nav-btn {
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .progress-container {
            width: 200px;
            height: 6px;
            background-color: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #3498db;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 600;
        }
        
        h2 {
            margin: 0 0 10px 0;
            font-size: 24px;
            font-weight: 500;
        }
        
        h3 {
            margin: 0 0 15px 0;
            font-size: 20px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        p {
            margin: 0 0 15px 0;
            line-height: 1.6;
            color: #34495e;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: 500;
        }
        
        .highlight {
            color: #3498db;
            font-weight: 500;
        }
        
        .center-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
        }
        
        .risk-warning {
            background-color: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="ppt-container">
        <!-- 首页 -->
        <div class="slide active" id="slide1">
            <div class="center-content">
                <div class="title-card">
                    <h1>诺安多策略混合A</h1>
                    <h2>十大重仓股分析报告</h2>
                    <p>基金代码：320016</p>
                    <p>报告日期：2025年9月30日</p>
                </div>
            </div>
        </div>
        
        <!-- 目录页 -->
        <div class="slide" id="slide2">
            <div class="title-card">
                <h2>报告目录</h2>
            </div>
            <div class="content-card">
                <ol style="font-size: 20px; line-height: 2;">
                    <li>基金概况</li>
                    <li>十大重仓股总览</li>
                    <li>持仓结构分析</li>
                    <li>个股详细分析</li>
                    <li>风险提示</li>
                </ol>
            </div>
        </div>
        
        <!-- 过渡页1 -->
        <div class="slide" id="slide3">
            <div class="center-content">
                <div class="title-card">
                    <h1>基金概况</h1>
                    <p>诺安多策略混合A(320016)基本情况</p>
                </div>
            </div>
        </div>
        
        <!-- 基金概况 -->
        <div class="slide" id="slide4">
            <div class="title-card">
                <h2>基金概况</h2>
            </div>
            <div class="content-card">
                <p>诺安多策略混合A(320016)是一只混合型基金，采用多策略投资方法，旨在通过灵活配置股票、债券等多种资产，为投资者创造稳健回报。</p>
                <h3>基金特点：</h3>
                <ul>
                    <li>投资风格：价值成长兼顾</li>
                    <li>资产配置：灵活多变</li>
                    <li>风险等级：中高风险</li>
                    <li>适合投资者：具有一定风险承受能力的长期投资者</li>
                </ul>
            </div>
        </div>
        
        <!-- 过渡页2 -->
        <div class="slide" id="slide5">
            <div class="center-content">
                <div class="title-card">
                    <h1>十大重仓股总览</h1>
                    <p>截至2025年9月30日</p>
                </div>
            </div>
        </div>
        
        <!-- 十大重仓股总览 -->
        <div class="slide" id="slide6">
            <div class="title-card">
                <h2>十大重仓股总览</h2>
            </div>
            <div class="content-card">
                <table>
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>股票名称</th>
                            <th>股票代码</th>
                            <th>持股数量(股)</th>
                            <th>市值(元)</th>
                            <th>占净值比例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>冠中生态</td>
                            <td>300948</td>
                            <td>1,379,200</td>
                            <td>22,246,496</td>
                            <td>0.66%</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>欣龙控股</td>
                            <td>000955</td>
                            <td>3,323,000</td>
                            <td>18,309,730</td>
                            <td>0.54%</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>远翔新材</td>
                            <td>301300</td>
                            <td>460,500</td>
                            <td>18,005,550</td>
                            <td>0.53%</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>福建水泥</td>
                            <td>600802</td>
                            <td>2,947,041</td>
                            <td>17,475,953.13</td>
                            <td>0.52%</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>宁波色母</td>
                            <td>301019</td>
                            <td>930,286</td>
                            <td>17,647,525.42</td>
                            <td>0.52%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 十大重仓股总览续 -->
        <div class="slide" id="slide7">
            <div class="title-card">
                <h2>十大重仓股总览(续)</h2>
            </div>
            <div class="content-card">
                <table>
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>股票名称</th>
                            <th>股票代码</th>
                            <th>持股数量(股)</th>
                            <th>市值(元)</th>
                            <th>占净值比例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>6</td>
                            <td>三超新材</td>
                            <td>300554</td>
                            <td>666,000</td>
                            <td>17,129,520</td>
                            <td>0.51%</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>富春染织</td>
                            <td>605189</td>
                            <td>1,099,260</td>
                            <td>17,423,271</td>
                            <td>0.51%</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>百川畅银</td>
                            <td>300614</td>
                            <td>1,069,600</td>
                            <td>16,803,416</td>
                            <td>0.50%</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>合力科技</td>
                            <td>603917</td>
                            <td>1,205,040</td>
                            <td>16,894,660.8</td>
                            <td>0.50%</td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>海波重科</td>
                            <td>300517</td>
                            <td>1,391,110</td>
                            <td>16,874,164.3</td>
                            <td>0.50%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 过渡页3 -->
        <div class="slide" id="slide8">
            <div class="center-content">
                <div class="title-card">
                    <h1>持仓结构分析</h1>
                    <p>行业分布与权重分析</p>
                </div>
            </div>
        </div>
        
        <!-- 持仓结构分析 -->
        <div class="slide" id="slide9">
            <div class="title-card">
                <h2>持仓结构分析</h2>
            </div>
            <div class="grid-container">
                <div class="content-card">
                    <h3>行业分布</h3>
                    <div id="industryChart" class="chart-container"></div>
                </div>
                <div class="content-card">
                    <h3>持仓比例</h3>
                    <div id="weightChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        
        <!-- 个股分析过渡页 -->
        <div class="slide" id="slide10">
            <div class="center-content">
                <div class="title-card">
                    <h1>个股详细分析</h1>
                    <p>重点持仓个股分析</p>
                </div>
            </div>
        </div>
        
        <!-- 个股分析1 -->
        <div class="slide" id="slide11">
            <div class="title-card">
                <h2>重点个股分析 - 冠中生态(300948)</h2>
            </div>
            <div class="content-card">
                <h3>基本情况</h3>
                <p>冠中生态是基金第一大重仓股，占净值比例<span class="highlight">0.66%</span>，持股数量<span class="highlight">1,379,200股</span>，市值<span class="highlight">22,246,496元</span>。</p>
                
                <h3>公司简介</h3>
                <p>冠中生态是一家专注于生态环境治理的企业，主营业务包括生态修复、环境治理等领域。</p>
                
                <h3>投资亮点</h3>
                <ul>
                    <li>受益于国家环保政策支持</li>
                    <li>行业增长空间广阔</li>
                    <li>技术壁垒较高</li>
                </ul>
            </div>
        </div>
        
        <!-- 个股分析2 -->
        <div class="slide" id="slide12">
            <div class="title-card">
                <h2>重点个股分析 - 欣龙控股(000955)</h2>
            </div>
            <div class="content-card">
                <h3>基本情况</h3>
                <p>欣龙控股是基金第二大重仓股，占净值比例<span class="highlight">0.54%</span>，持股数量<span class="highlight">3,323,000股</span>，市值<span class="highlight">18,309,730元</span>。</p>
                
                <h3>公司简介</h3>
                <p>欣龙控股是一家综合性企业集团，业务涵盖纺织、医疗、房地产等多个领域。</p>
                
                <h3>投资亮点</h3>
                <ul>
                    <li>多元化业务结构</li>
                    <li>资产质量较好</li>
                    <li>估值相对合理</li>
                </ul>
            </div>
        </div>
        
        <!-- 风险提示过渡页 -->
        <div class="slide" id="slide13">
            <div class="center-content">
                <div class="title-card">
                    <h1>风险提示</h1>
                    <p>投资需谨慎</p>
                </div>
            </div>
        </div>
        
        <!-- 风险提示 -->
        <div class="slide" id="slide14">
            <div class="title-card">
                <h2>风险提示</h2>
            </div>
            <div class="content-card">
                <div class="risk-warning">
                    <h3>重要提示</h3>
                    <p>本报告基于公开数据生成，仅供参考。投资有风险，决策需谨慎。</p>
                </div>
                
                <h3>主要风险因素</h3>
                <ul>
                    <li>市场系统性风险</li>
                    <li>个股基本面变化风险</li>
                    <li>政策调整风险</li>
                    <li>流动性风险</li>
                    <li>基金经理变更风险</li>
                </ul>
                
                <h3>投资建议</h3>
                <p>投资者应根据自身风险承受能力、投资目标和投资期限，审慎做出投资决策。建议分散投资，不要将资金集中于单一基金或资产类别。</p>
            </div>
        </div>
        
        <!-- 结束页 -->
        <div class="slide" id="slide15">
            <div class="center-content">
                <div class="title-card">
                    <h1>感谢观看</h1>
                    <p>诺安多策略混合A十大重仓股分析报告</p>
                    <p>2025年9月</p>
                </div>
            </div>
        </div>
        
        <!-- 导航控制 -->
        <div class="nav-controls">
            <button class="nav-btn" id="prevBtn">上一页</button>
            <button class="nav-btn" id="nextBtn">下一页</button>
            <div class="progress-container">
                <div class="progress-bar" id="progressBar"></div>
            </div>
        </div>
    </div>

    <script>
        // 幻灯片控制
        const slides = document.querySelectorAll('.slide');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const progressBar = document.getElementById('progressBar');
        let currentSlide = 0;
        const totalSlides = slides.length;
        
        function showSlide(idx) {
            if (idx < 0) idx = 0;
            if (idx >= totalSlides) idx = totalSlides - 1;
            
            slides.forEach(slide => slide.classList.remove('active'));
            slides[idx].classList.add('active');
            currentSlide = idx;
            
            // 更新进度条
            progressBar.style.width = `${(currentSlide + 1) / totalSlides * 100}%`;
            
            // 调整图表大小
            setTimeout(function() {
                if (window.industryChart) industryChart.resize();
                if (window.weightChart) weightChart.resize();
            }, 50);
        }
        
        prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
        nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));
        
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 行业分布图表
            const industryChartDom = document.getElementById('industryChart');
            window.industryChart = echarts.init(industryChartDom);
            
            const industryOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '行业分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 0.66, name: '环保(冠中生态)' },
                            { value: 0.54, name: '综合(欣龙控股)' },
                            { value: 0.53, name: '新材料(远翔新材)' },
                            { value: 0.52, name: '建材(福建水泥)' },
                            { value: 0.52, name: '化工(宁波色母)' },
                            { value: 0.51, name: '新材料(三超新材)' },
                            { value: 0.51, name: '纺织(富春染织)' },
                            { value: 0.50, name: '环保(百川畅银)' },
                            { value: 0.50, name: '机械(合力科技)' },
                            { value: 0.50, name: '建筑(海波重科)' }
                        ]
                    }
                ]
            };
            
            industryChart.setOption(industryOption);
            
            // 权重图表
            const weightChartDom = document.getElementById('weightChart');
            window.weightChart = echarts.init(weightChartDom);
            
            const weightOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['冠中生态', '欣龙控股', '远翔新材', '福建水泥', '宁波色母', 
                           '三超新材', '富春染织', '百川畅银', '合力科技', '海波重科']
                },
                series: [
                    {
                        name: '占净值比例(%)',
                        type: 'bar',
                        data: [0.66, 0.54, 0.53, 0.52, 0.52, 0.51, 0.51, 0.50, 0.50, 0.50],
                        itemStyle: {
                            color: function(params) {
                                const colorList = ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6',
                                                  '#1abc9c', '#d35400', '#34495e', '#16a085', '#c0392b'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                ]
            };
            
            weightChart.setOption(weightOption);
            
            // 窗口大小变化时调整图表
            window.addEventListener('resize', function() {
                industryChart.resize();
                weightChart.resize();
            });
        });
    </script>
</body>
</html>